<template>
    <div class="page-100 replace-parts-layout">
        <div v-for="(item,index) in replaceList">
            <p class="details-title-part">明细（{{index+1}}）</p>
            <div class="replace-parts-details-part">
                <p class="content-part">确认时间</p>
                <p>{{item.created.substring(0,item.created.lastIndexOf(':'))}}</p>
            </div>
            <div class="replace-parts-details-part">
                <p class="content-part">物品名称</p>
                <p>{{item.name}}</p>
            </div>
            <div class="replace-parts-details-part">
                <p class="content-part">用途</p>
                <p>{{item.purpose}}</p>
            </div>
            <div class="replace-parts-details-part">
                <p class="content-part">单价(元)</p>
                <p>{{(item.total_price/item.count).toFixed(2)}}</p>
            </div>
            <div class="replace-parts-details-part">
                <p class="content-part">数量</p>
                <p>{{item.count}}</p>
            </div>
            <div class="replace-parts-details-part">
                <p class="content-part">总价(元)</p>
                <p>{{item.total_price+'.00'}}</p>
            </div>
            <div class="replace-parts-details-part">
                <p class="content-part">备注</p>
                <p>{{item.remark}}</p>
            </div>
        </div>
        <div class="image-module-part" v-if="state==='1'">
            <img class="image-logo-part"  src="../../assets/queren.png"/>
        </div>
        <div class="image-module-part" v-if="state==='2'">
            <img class="image-logo-part"  src="../../assets/jujie.png"/>
        </div>
        <p class="blue-color total-price-part">合计(元): {{totalPrice+'.00'}}</p>
        <div style="height: 1.4rem"></div>
        <div class="replace-operation-part buttom-tabbar" v-if="state==='0'">
            <p v-show="isShowOperation"  class="blue-color" @click="purchaseConfirmYes">同意</p>
            <div class="replace-left-button-part"></div>
            <p v-show="isShowOperation" class="blue-color" @click="purchaseConfirmNo">拒绝</p>
        </div>
    </div>
</template>

<script>
    import {purchaseList,purchaseConfirm,purchaseAllFlatten} from "../../pcof/post";
    import {userInfoData} from '../../globalVariables'
    export default {
        name: "repairReplaceParts",
        data() {
            return {
                generalUuid: '',
                taskUUid: '',
                replaceList: [],
                state: '0',
                totalPrice: 0,
                taskState: '',
                isShowOperation: true,
            }
        },
        beforeCreate() {
            this.$dialog.loading.open('加载中...');
        },
        async created() {
            //接受上个页面传值 在实例创建完成后被立即调用
            this.generalUuid = this.$route.params.generalUuid;
            this.taskUUid = this.$route.params.taskUUid;
            this.taskState = this.$route.params.taskState;
            if (this.generalUuid === '' || this.generalUuid === null) {
                this.purchaseAllFlattenFunc();
            } else {
                this.purchaseListFunc();
            }

            if (this.taskState !== '' && this.taskState != null && this.taskState != undefined) {
                if (this.taskState === '99' || this.taskState === '98' || this.taskState === '97' ||
                    this.taskState === '08') {
                    this.isShowOperation = false;
                }
            }

        },
        methods: {
            async purchaseAllFlattenFunc() {
                var response = await purchaseAllFlatten(
                    JSON.parse(localStorage.getItem(userInfoData)).mobile,this.taskUUid,1
                );
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    this.replaceList = response.data.data.list;
                    // 1 - User端已确认采购单申请
                    // 2 - User端拒绝采购单申请
                    // 其他 - 初始状态
                    this.state = response.data.data.state;
                    for (var i = 0;i<this.replaceList.length;i++) {
                        this.totalPrice += this.replaceList[i].total_price;
                        console.log(this.totalPrice)
                    }
                } else {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            async purchaseListFunc() {
                var response = await purchaseList(
                    JSON.parse(localStorage.getItem(userInfoData)).mobile,this.generalUuid
                );
                if (response.data.code === 200) {
                    this.$dialog.loading.close();
                    this.replaceList = response.data.data.list;
                    // 1 - User端已确认采购单申请
                    // 2 - User端拒绝采购单申请
                    // 其他 - 初始状态
                    this.state = response.data.data.state;
                    for (var i = 0;i<this.replaceList.length;i++) {
                        this.totalPrice += this.replaceList[i].total_price;
                    }
                } else {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            async purchaseConfirmFunc() {
                this.$dialog.loading.open('加载中...');
                var response = await purchaseConfirm(
                    localStorage.getItem(userInfoData).mobile, this.generalUuid,this.taskUUid,'y');
                if (response.data.code === 200) {
                    this.$dialog.loading.close();

                    var purchaseResponse = await purchaseList(
                        JSON.parse(localStorage.getItem(userInfoData)).mobile,this.generalUuid
                    );
                    if (purchaseResponse.data.code === 200) {
                        this.replaceList = purchaseResponse.data.data.list;
                        this.total_price = purchaseResponse.data.data.total_price;
                        this.state = purchaseResponse.data.data.state;
                        this.$dialog.toast({
                            mes: '已同意',
                            timeout: 1500
                        });
                        this.$router.back();
                    } else {
                        this.$dialog.toast({
                            mes: purchaseResponse.data.msg,
                            timeout: 1500
                        });
                    }
                } else {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            purchaseConfirmYes() {
                this.$dialog.confirm({
                    title: '',
                    mes: '同意即代表允许对方更换页面上提到的所有配件',
                    opts: [{
                        txt: '同意',
                        color: true,
                        callback: () => {
                            this.purchaseConfirmFunc();
                        }
                    },
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                            }
                        }
                    ]
                });
            },
            async purchaseConfirmNoFunc() {
                this.$dialog.loading.open('加载中...');
                var response = await purchaseConfirm(
                    localStorage.getItem(userInfoData).mobile, this.generalUuid,this.taskUUid,'n');
                if (response.data.code === 200) {
                    this.$dialog.loading.close();

                    var purchaseResponse = await purchaseList(
                        JSON.parse(localStorage.getItem(userInfoData)).mobile,this.generalUuid
                    );
                    if (purchaseResponse.data.code === 200) {
                        this.replaceList = purchaseResponse.data.data.list;
                        this.total_price = purchaseResponse.data.data.total_price;
                        this.state = purchaseResponse.data.data.state;
                        this.$dialog.toast({
                            mes: '已拒绝',
                            timeout: 1500
                        });
                        this.$router.back();
                    } else {
                        this.$dialog.toast({
                            mes: purchaseResponse.data.msg,
                            timeout: 1500
                        });
                    }

                } else {
                    this.$dialog.loading.close();
                    this.$dialog.toast({
                        mes: response.data.msg,
                        timeout: 1500
                    });
                }
            },
            async purchaseConfirmNo() {
                this.$dialog.confirm({
                    title: '',
                    mes: '拒绝即代表不允许对方更换页面上提及的所有配件',
                    opts: [{
                        txt: '拒绝',
                        color: true,
                        callback: () => {
                            this.purchaseConfirmNoFunc();
                        }
                    },
                        {
                            txt: '取消',
                            color: false,
                            callback: () => {
                            }
                        }
                    ]
                });
            }
        },
    }
</script>

<style lang="scss">
    .replace-parts-layout {
        background: #ffffff;

        .total-price-part {
            text-align: left;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
            padding-left: 0.6rem;
            background: #e6e6e6;
        }

        .details-title-part {
            text-align: left;
            padding-left: 0.6rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
            font-size: 1.4em;
            border-bottom: 1px solid #e6e6e6;
            background: #e6e6e6;
        }

        .replace-parts-details-part {
            display: flex;
            align-items: center;
            padding-left: 0.6rem;
            padding-right: 0.4rem;
            padding-top: 0.2rem;
            padding-bottom: 0.2rem;
            font-size: 1.2em;
            border-bottom: 1px solid #e6e6e6;

            .content-part{
                /*padding-right: 1rem;*/
                width: 30%;
                text-align: left;
                color: #a0a0a0;
            }
        }

        .image-module-part {
            display: flex;
            flex-direction: row-reverse;
            margin-right: 0.5rem;

            position: relative;
            top: -0.8rem;

            .image-logo-part {
                width: 1.4rem;
                height: 1rem;
            }
        }

        .replace-operation-part {
            display: flex;
            align-items: center;
            justify-content: space-around;
            justify-items: center;
            padding: 0.4rem;
            font-size: 1.2em;
            background: #ffffff;
            border: 1px solid #e6e6e6;

            .replace-left-button-part {
                float:left;
                width: 1px;
                height: 0.6rem;
                background: #e6e6e6;
            }
        }
    }
</style>